<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>性能检测</el-breadcrumb-item>
        <el-breadcrumb-item>接口压力</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="24">
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="输入ip地址" v-model="queryParams.ipAddress" /> 
              </el-col>
              <el-col :span="4">
                  <span style="margin-top:10px">接口消耗时间范围(毫秒)</span>
              </el-col>
               <el-col :span="3">
                  <el-input size="small" clearable placeholder="最小时间" v-model="queryParams.startTime" /> 
              </el-col>
              <el-col :span="1">
                 <span>-</span>
              </el-col>
              <el-col :span="3">
                  <el-input size="small" clearable placeholder="最大时间" v-model="queryParams.endTime" /> 
              </el-col>
              <el-col :span="5" >
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search" v-if="permissionStrValue.indexOf('interfaceList:query') !== -1">查询</el-button>
              </el-col>
          </el-row>
             <!--放表格-->
        <el-table :data="list" border >
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="请求接口">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.interfaceUrl }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ip地址">
                 <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.ipAddress }}</span>
                </template>
            </el-table-column>
            <el-table-column label="消耗的时间">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="调用的方法">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.method}}</span>
                </template>
            </el-table-column>
            <el-table-column label="请求时间">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>


        </el-card>
    </div>
</template>
<script>
export default {
    name: 'InterfaceList',
    data() {
        return{
            queryParams: {
                ipAddress: '',
                startTime: '',
                endTime: '',
                currPage: 1,
                pageSize: 10
            },
            total: 0,
            list: [],
            permissionStrValue: ''

        }
    },
    created() {
        this.queryPage();
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();

    },
    methods: {

        async queryPage() {
             const{data: res} = await this.$http.post('/user/api-request-log/query-page', JSON.stringify(this.queryParams), {
                 headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.list = res.data;
            this.total = res.total;

        },
        handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },

    }
}
</script>